@import "./theme.less";
.broadcast{
  .rem(padding-bottom,50);
  .title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    .rem(height,159);
    .rem(font-size, 40px);
    font-weight: 600;
    color: #59370E;
    background: #FFDAA7 url('../images/broadcast-top.png');
    .icon-dui{
      .rem(margin-right,10);
      .rem(width,41);
      .rem(height,41);
      background: url("../images/icon-dui.png");
      background-size: cover;
    }
  }
  .code{
    position: relative;
    margin: .unit(38) .unit(32);
    .rem(height,855);
    background-image: url('../images/broadcast-bg.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    .name{
      .rem(padding-top,79);
      .rem(font-size, 40px);
      font-weight: 600;
      color: #FEFEFE;
      text-align: center;
    }
    .qrcode{
      margin: .unit(50) auto 0 auto;
      .rem(width,490);
      .rem(height,569);
      padding: .unit(27) .unit(42) 0 .unit(42);
      .rem(border-radius, 8);
      background: #ffffff;
      .qrcodeInfo{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        img{
          .rem(width,82);
          .rem(height,82);
        }
        .qrcodeContent{
          .rem(margin-left,19);
          .labelName{
            .rem(font-size, 30);
            font-weight: 400;
            color: #333333;
            .rem(line-height, 42);
          }
          .teacher{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            .rem(margin-top,9);
            .rem(font-size, 24);
            font-weight: 400;
            color: #E3884A;
            .rem(line-height, 33px);
            .icon-mingxing{
              display: block;
              .rem(margin-right,8);
              .rem(width,25);
              .rem(height,25);
              background: url("../images/icon-mingxing.png");
              background-size: cover;
            }
          }
        }
      }
      .qrcode-images{
        .rem(margin-top,17);
        width: 100%;
      }
    }
    .userGroup{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      position: absolute;
      .rem(left, 50);
      .rem(right, 50);
      .rem(bottom,-30);
      .rem(height,106);
      background: #ffffff;
      box-shadow: 0 .unit(2) .unit(14) #ffc187;
      .rem(border-radius,16);
      .picture{
        margin: 0 .unit(20);
        .rem(width,140);
        overflow: hidden;
        ul{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          li{
            display: inline-block;
            img{
              margin: 0 .unit(9);
              .rem(width,50);
              .rem(height,50);
              .rem(border-radius,50);
            }
          }
        }
      }
      .data{
        .rem(font-size, 36px);
        font-weight: 500;
        color: #333333;
        span{
          color: #FD5807;
        }
      }
    }
  }
}